<!DOCTYPE html>
<html>
<head>
    <title><%=title%></title>
    <% include common/top.html %>
    <link rel='stylesheet' href='/pc/css/index.css'/>
    <script src='/pc/js/index.js'></script>
</head>
<body>
<!--大部分页面基于前端渲染，对于少数使用后端渲染页面的时候，配置partials，同时在这边引入content部分-->
    <% include common/header.html %>
    <div class="content" v-cloak>
        <div class="container">
            <div class="searchbar clearfix" v-cloak>
                <input class="keywords fl" placeholder="输入地址搜索美食" @input="getMatch | debounce 500" @focus="showResult | debounce 500"  @blur="hideResult | debounce 500" v-model="keywords">
                <a class="fl searchbtn" @click="search">搜索</a>

            </div>
            <ul class="result-wrapper" v-show="focus">
                <li v-for="match in matches" @click="fillSearchBar(match.address,$event)">
                    <p class="dropMenu_name">{{match.name}}</p>
                    <p class="dropMenu_address">{{match.address}}</p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>